<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课堂小案例</title>
</head>
<body>
<!--
请完成以下需求
const spec = { size: '40cm*40cm' , color: '黑色'}
请将里面的值写到div标签里面，展示内容如下：
40cm*40cm/黑色

思路： 获得所有的属性值，然后拼接字符串就可以了
①： 获得所有属性值是： Object.values() 返回的是数组
②： 拼接数组是 join(‘’) 这样就可以转换为字符串了
-->

<div></div>


<script>
    const 规范文本 = {size: '40cm*40cm', color: '黑色'}
    //1. values 所有的属性的值回去过来,  数组
    console.log(Object.values(规范文本))

    // 2. 转换为字符串   数组join('/') 把数组根据分隔符转换为字符串
    console.log(Object.values(规范文本).join('/'))

    // 通过数组的2个方法, 把对象里的属性,拼接成了一个字符串

    // 完成案例
    const div盒子 = document.querySelector('div') // 获取DOM元素
    const 规范文本_数组 = Object.values(规范文本) // 把对象,属性的值 都取余出来,返回一个数组
    const 规范文本_字符串 = 规范文本_数组.join('/') // 数组元素 拼接成一个字符串, 这里以 / 作为,分隔符

    div盒子.innerHTML = 规范文本_字符串 // 修改div标签里的,内容

    // 以上写法可以使用,链式编程方法
    // document.querySelector('div').innerHTML = Object.values(规范文本).join('/')
</script>
</body>
</html>